<template>
  <van-tabbar v-model="active" active-color="#ff5f16">
    <van-tabbar-item to="/films" icon="video-o">电影</van-tabbar-item>
    <van-tabbar-item to="/cinemas">
      <span>影院</span>
      <template #icon="props">
        <xw-icon :active="props.active" @clickIcon="clickIcon" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/news">
      <span>资讯</span>
      <template #icon="props">
        <xw-icon :active="props.active" icon="icon-yonghuziliaogerenxinxigerenziliao-xianxing" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/center" icon="user-circle-o">个人</van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    }
  },
  methods: {
    clickIcon(index) {
      console.log(index)
    }
  }
}
</script>

<style lang="scss" scoped></style>
